<template>
	<view class="car">
    <div class="handle-head">
      <div @click="isShowDelete = !isShowDelete">{{ isShowDelete ? '完成' : '管理'}}</div>
    </div>
    <u-empty mode="car" v-if="!carList.length"></u-empty>
    <div class="car-list">
      <div class="car-item" v-for="item in carList.filter(el => el.status === 1)" :key="item.id">
        <u-checkbox active-color="#39b54a" @change="changeDeleteChecked" shape="circle" v-if="isShowDelete" v-model="item.deleteChecked" :label-disabled="false"></u-checkbox>
        <u-checkbox active-color="#39b54a" @change="changeBuyChecked" shape="circle" v-else v-model="item.buyChecked" :label-disabled="false"></u-checkbox>
        <u-image :src="item.image" :width="160" :height="160" mode="aspectFit"></u-image>
        <div class="goods-detail">
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div class="goods-name">{{ item.name }}</div>
            <u-icon name="trash" :size="48" @click="deleteItem(item)"></u-icon>
          </div>
          <div class="goods-price-box">
            <div class="goods-price">￥{{ item.price }}</div>
            <div class="goods-count">
              <u-icon name="minus-circle" :size="48" @click="deleteCount(item)"></u-icon>
              <span class="goods-count-value">{{ item.count }}</span>
              <u-icon name="plus-circle" :size="48" @click="addCount(item)"></u-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="car-item" v-for="item in carList.filter(el => el.status === 0)" :key="item.id">
        <u-checkbox active-color="#39b54a" @change="changeDeleteChecked" shape="circle" v-if="isShowDelete" v-model="item.deleteChecked" :label-disabled="false"></u-checkbox>
        <u-checkbox active-color="#39b54a" shape="circle" v-else disabled :label-disabled="false"></u-checkbox>
        <u-image :src="item.image" :width="160" :height="160" mode="aspectFit"></u-image>
        <div class="goods-detail">
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div class="goods-name">{{ item.name }}</div>
            <u-icon name="trash" :size="48" @click="deleteItem(item)"></u-icon>
          </div>
          <div class="goods-desc">
            {{ item.tips }}
          </div>
          <div class="goods-price-box">
            <div class="goods-price">￥{{ item.price }}</div>
            <div class="goods-count">
              已下架
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="car-action" v-if="isShowDelete">
      <u-checkbox active-color="#39b54a" @change="changeDeleteCheckedAll" shape="circle" v-model="deleteCheckedAll" :label-disabled="false">全选</u-checkbox>
      <div class="total">
      </div>
      <div>
        <u-button style="width: 100px;margin: 0 auto" plain type="error" :ripple="true" shape="circle" @click="deleteAll">删除</u-button>
      </div>
    </div>
    <div class="car-action" v-else>
      <u-checkbox @change="changeBuyCheckedAll" active-color="#39b54a" shape="circle" v-model="buyCheckedAll" :label-disabled="false">全选</u-checkbox>
      <div class="total">
        <span>合计：</span>
        <span class="total-value">￥{{ totalValue }}</span>
        <div>
          <u-button style="background-color: #39b54a;color: #ffffff;border-color:transparent;width: 100px;margin: 0 auto" :ripple="true" shape="circle" @click="buyAll">结算</u-button>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        isShowDelete: false,
        buyCheckedAll: false,
        deleteCheckedAll: false,
        carList: [

        ]
			}
		},
    computed: {
      totalValue() {
        return this.carList.filter(el => el.status === 1).filter(el => el.buyChecked).reduce((total, el) => {
          total += el.price * el.count
          return total
        }, 0)
      }
    },
    watch: {
      // 监听carList的变化
      carList: {
        handler(value) {
          let val = value.filter(el => el.status === 1)
          if (val.length === 0) {
            this.deleteCheckedAll = false
            this.buyCheckedAll = false
            return
          }
          if(val.every(el => el.deleteChecked)) {
            this.deleteCheckedAll = true
          } else {
            this.deleteCheckedAll = false
          }
          if(val.every(el => el.buyChecked)) {
            this.buyCheckedAll = true
          } else {
            this.buyCheckedAll = false
          }
          this.setCarList()
        },
        deep: true
      }
    },
    onShow() {
      this.$setCar()
      this.init()
    },
		methods: {
      async init() {
        this.isShowDelete = false
        const carList = uni.getStorageSync('carList') || []
        for (let i = 0; i < carList.length; i++) {
          let res = await this.$api.goodsDetail({
            id: carList[i].goods_id
          })
          res = res || {}
          carList[i] = {
            ...carList[i],
            ...res,
            image: this.$baseUrl + res.image
          }
        }
        this.carList = carList
        if(this.carList.every(el => el.deleteChecked)) {
          this.deleteCheckedAll = true
        }
        if(this.carList.filter(el => el.status === 1).every(el => el.buyChecked)) {
          this.buyCheckedAll = true
        }
        this.carList = this.carList.filter(el => el.id)
        uni.setStorageSync('carList', this.carList)
        this.$setCar()
      },
      deleteAll() {
        const deleteList = this.carList.filter(el => el.deleteChecked)
        if (deleteList.length === 0) {
          this.$u.toast('请选择商品')
          return
        }
        this.carList = this.carList.filter(el => !el.deleteChecked)
        this.setCarList()
      },
      buyAll() {
        if (!uni.getStorageSync('userInfo')) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        const buyList = this.carList.filter(el => el.status === 1).filter(el => el.buyChecked)
        if (buyList.length === 0) {
          this.$u.toast('请选择商品')
          return
        }
        uni.setStorageSync('buyList', buyList.map(el => {
			return {
				...el,
				remark: ''
			}
		}))
        this.$u.route('/pages/createOrder/createOrder')
      },
      deleteItem(item) {
        this.carList = this.carList.filter(el => el.goods_id !== item.goods_id)
        this.setCarList()
      },
      deleteCount(item) {
        if (item.count === 1) {
          // 删除
          this.carList = this.carList.filter(el => el.goods_id !== item.goods_id)
        } else {
          item.count--
        }
        this.setCarList()
      },
      addCount(item) {
        item.count++
        this.setCarList()
      },
      changeDeleteChecked(e) {
        this.setCarList()
      },
      changeBuyChecked(e) {
        this.setCarList()
      },
      changeDeleteCheckedAll(e) {
        this.carList.forEach(el => {
          el.deleteChecked = e.value
        })
        this.setCarList()
      },
      changeBuyCheckedAll(e) {
        this.carList.filter(el => el.status === 1).forEach(el => {
          el.buyChecked = e.value
        })
        this.setCarList()
      },
      setCarList() {
        uni.setStorageSync('carList', this.carList.map(el => {
          return {
            goods_id: el.id,
            count: el.count,
            buyChecked: el.buyChecked,
            deleteChecked: el.deleteChecked
          }
        }))
      }
		}
	}
</script>

<style lang="scss">
.car {
  background-color: #f7f8fa;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .handle-head {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #39b54a;
    padding: 0 14px;
  }
  .car-list {
    overflow: auto;
    .car-item {
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods-name {
          font-size: 32rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #39b54a;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 36rpx;
            }
          }
        }
      }
    }
  }
  .car-action {
    flex-shrink: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    color: #FFFFFF;
    box-sizing: border-box;
    padding: 0 14px;
    .car-btn {

    }
    .total {
      color: #000000;
      display: flex;
      align-items: center;
    }
    .total-value {
      color: #39b54a;
      margin-right: 15px;
    }
  }
}
</style>
